<template>
  <div class="signup-page mx-auto p-3 w-330">
    <h5>注册账号</h5>
    <ValidateForm @form-submit="onFormSubmit">
      <div class="mb-3">
        <label class="form-label">邮箱地址</label>
        <ValidateInput
          type="text"
          v-model="formData.email"
          :rules="emailRules"
          placeholder="请输入正确的邮箱地址"
          @value="emailVal"
        ></ValidateInput>
      </div>
      <div class="mb-3">
        <label class="form-label">昵称</label>
        <ValidateInput
        type="text"
          v-model="formData.nickName"
          :rules="nameRules"
          placeholder="请输入昵称"
          @value="nameVal"
        ></ValidateInput>
      </div>
      <div class="mb-3">
        <label class="form-label">密码</label>
        <ValidateInput
          type="text"
          v-model="formData.password"
          :rules="passwordRules"
          placeholder="请输入密码"
          @value="passwordVal"
        ></ValidateInput>
      </div>
      <div class="mb-3">
        <label class="form-label">重复密码</label>
        <ValidateInput
        type="text"
          v-model="formData.repeatPassword"
          :rules="repeatPasswordRules"
          placeholder="请再次输入密码"
          @value="repeatPasswordVal"
        ></ValidateInput>
      </div>
      <template #submit>
        <button type="submit" class="btn btn-primary btn-block btn-large">注册新用户</button>
      </template>
    </ValidateForm>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import axios  from "axios";
import ValidateForm from "@/components/ValidateForm.vue";
import ValidateInput, { RulesProp } from "@/components/ValidateInput.vue";
import createMessage from "@/hooks/createMessage";
export default defineComponent({
  components: {
    ValidateForm,
    ValidateInput,
  },
  setup() {
    const formData = reactive({
        email:'',
        nickName:'',
        password:'',
        repeatPassword:''
    })
    const emailVal = (val: string) => {
        formData.email = val
    }
    const nameVal = (val: string) => {
        formData.nickName = val
    }
    const passwordVal = (val: string) => {
        formData.password = val
    }
    const repeatPasswordVal = (val: string) => {
        formData.repeatPassword = val
    }
    const router = useRouter()
    //邮箱验证规则
    const emailRules: RulesProp = [
    {type: 'required', message:'电子邮箱地址不能为空'},
    {type: 'email', message:'请输入正确的电子邮箱格式'},
    ]
    const nameRules: RulesProp = [{ type: 'required', message: '昵称不能为空'}]
    const passwordRules: RulesProp = [
        { type: 'required', message:'密码不能为空'}
    ]
    const repeatPasswordRules: RulesProp = [
        { type: 'required', message:'重复密码不能为空'},
        { type: 'custom', validator: () => formData.password === formData.repeatPassword, message: '密码不相同'}
    ]
    const onFormSubmit = (result: boolean) => {
        if(result) {
            const payload = {
                email: formData.email,
                nickName:formData.nickName,
                password:formData.password
            }
            axios.post('/users', payload).then((data) => {
                console.log(data);
                createMessage('注册成功， 正在跳转登录页面','success')
                setTimeout(() => {
                    router.push('/login')
                },2000)
                
            }).catch((e) => {
                console.log(e);
                
            })
        }
    }
    return {
        formData,
        emailRules,
        nameRules,
        passwordRules,
        repeatPasswordRules,
        onFormSubmit,
        emailVal,
        nameVal,
        passwordVal,
        repeatPasswordVal
    };
  },
});
</script>

<style>
.w-330 {
    max-width: 330px
}
</style>
